<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./demo.js"></script>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .box {
        position: absolute;
        width: 500px;
        height: 500px;
        overflow: hidden;
        /* position: relative; */
        top: 50%;
        left: 50%;
        margin-top: -250px;
        margin-left: -250px;
    }

    .box img {
        width: 500px;
        height: 500px;
    }

    ul {
        list-style: none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -60px;
    }

    ul li {
        float: left;
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
        margin-right: 10px;
    }

    ul li.active {
        background: blue;
    }
</style>

<body>
    <div class="box">
        <img src="./img/原神1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        let num = 1
        let t = null
        function startlunbo() {
            t = setInterval(() => {
                num++
                if (num > 6) num = 1
                document.querySelector('img').src = `./img/原神${num}.jpg`
                // 圆圈同步变化
                document.querySelector('.box li.active').className = ''
                let ulliobjs = document.querySelectorAll('.box li')
                ulliobjs[num - 1].className = 'active'
            }, 1000);
        }
        startlunbo()
        // 鼠标移入停止定时器
        let pageobj = document.querySelectorAll('.box ul li')
        pageobj.forEach((item, i) => {
            //绑定移入事件
            item.onmouseover = function () {
                clearInterval(t)
                // 同步图片
                document.querySelector('.box img').src = `./img/原神${i + 1}.jpg`
                num = i + 1
                document.querySelector('.box li.active').className = ''
                document.querySelectorAll('.box li')[i].className = 'active'
            }
            item.onmouseout = function () {
                startlunbo()
            }
        });

    </script>
</body>


</html>